<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="../css/toastr.min.css" />
    <link rel="stylesheet" href="../css/main.css" />
    <link rel="stylesheet" href="../css/validationEngine.jquery.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/json.min.js"></script>
    <script src="../js/jquery.i18n.properties-min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-select.min.js"></script>
    <script src="../js/bootstrap-datetimepicker.min.js"></script>
    <script src="../js/toastr.min.js"></script>
    <script src="../js/core-datagrid.js"></script>
    <script src="../js/core-etable.js"></script>
    <script src="../js/jquery.validationEngine.min.js"></script>
    <script src="../js/jquery.validationEngine-en.js"></script>
      <script src="../js/core.js"></script>
      <script src="../js/core-selectButton.js"></script>
  </head>
<body>
<form id="userForm">
	<table  class="dialog">
		<tr>
			<th>User ID :</th>
			<td><input name="userId" type="text" id="userId" class="form-control" data-errormessage="Please enter UserId" data-validation-engine="validate[required]"></td>
			<td><span class="must-msg">*</span></td>
		</tr>
		<tr>
			<th>First Name :</th>
			<td><input name="firstName" type="text" class="form-control" data-errormessage="Please enter 1 to 20 characters!" data-validation-engine="validate[required,maxSize[20]]"></td>
			<td><span class="must-msg">*</span></td>
		</tr>
		<tr>
			<th>Button Test :</th>
			<td>
                <div class='btn-group'>
                    <button type="button"  class="btn btn-default" style="width: 160px;" selectButton="selectButtonDialog.html" value="" data-validation-engine="validate[required]" id="testBut" >==请选择==</button>
                    <button type="button" class="btn btn-default" style="width: 20px;" >
                        <span class="glyphicon glyphicon-remove"  aria-hidden="true"></span>
                    </button>
                </div>
            </td>
			<td><span class="must-msg">*</span></td>
		</tr>
	</table>
	<div class="col-xs-6 col-xs-offset-3">
		<button type="submit" id="savebtn" class="btn btn-primary">Save</button>
	</div>
</form>
<script type="text/javascript">
	//初始化表单验证
    $("#userForm").validationEngine({
        promptPosition: "centerRight",//提示信息的位置，默认就是	topRight ("topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline")
        binded : true,  //是否绑定实时验
        onValidationComplete : userFormSuccess,
        addPromptClass:"formError-small",
        fadeDuration:0
	});
	
    function userFormSuccess(form,status) {
        if (status) {
        	toastr.success('Validation Successfully !','');
        }
    }
</script>
<div id="dialogGroup"></div>
</body>